<script setup>
import { computed, ref, watch } from 'vue';
import { platformsOptions } from '@/constants/common'
import { $t } from '@/locales';
import { fetchGetWarehourse } from '@/service/api';
defineOptions({ name: 'StoreAddModal' });

const props = defineProps(['rowData']);
const visible = defineModel('visible', { default: false });
const platformOptions = platformsOptions.filter(item => item.value !== -1)

const tagOptions = []
const warehouseOptions = ref([])
const agreementOptions = [{ label: 'HTTPS', value: 0 },{ label: 'Socks', value: 1 }]

const steps = ref([
  { title: '授权店铺', description: '让店铺与AIseller关联', status: 'process' },
  { title: '设置物流渠道', description: '设置对应的退货地址和发货渠道', status: '' },
  { title: '设置高阶功能', description: '为了可以统计店铺数据，批量操作等', status: '' },
])
const currentStep = ref(0)

const freight = ref([
  { LogisticName: 'JNE Reguler', Enabled: true },
  { LogisticName: 'JNE Trucking (JTR)', Enabled: true },
  { LogisticName: 'J&T Express', Enabled: true },
  { LogisticName: 'J&T Economy', Enabled: true },
])

const address = {
  address: 'Pergudangan Kosambi Permai blok R-Q, Jalan raya Perancis Dadap Tangerang 15211 Indonesia',
  name: 'Hans',
  phone: '08118898996'
}

const model = ref(createDefaultModel());
function createDefaultModel() {
  return {
    ShopId: undefined,
    authLink: '',
    name: '',
    tag: undefined,
    warehouseId: undefined,
    account: '',
    pwd: '',
    agreement:undefined,
    ipAddress: '',
    proxyPort: '',
    proxyAccount: '',
    proxyPwd: '',
    cookie: '',
  };
}

function handleNext() {
  if (currentStep.value === 0) {
    // TODO: 授权店铺
    steps.value[0].status = 'finish'
    steps.value[1].status = 'process'
  } else if (currentStep.value === 1) {
    // TODO: 设置物流渠道
    steps.value[1].status = 'finish'
    steps.value[2].status = 'process'
  } else if (currentStep.value === 2) {
    // TODO: 完成创建
  }
  currentStep.value++
}

async function getWarehourseOptions() {
  const { error, data }  = await fetchGetWarehourse();
  if (!error) {
    const options = data.Data.map(item=>({
      label: item.Name,
      value: item.Id
    }))

    warehouseOptions.value = options
  }
}

watch(visible, () => {
  if (visible.value) {
    getWarehourseOptions();
  }
});
</script>

<template>
  <ElDialog v-model="visible" :title="$t('page.store.addStore')" class="w-1200px">
    <div class="w-624px mx-auto">
      <div class="my-46px">
        <div class="h-full flex justify-between">
          <div v-for="(item, index) in steps" :key="index" class="flex" :class="{ 'is-finish': item.status === 'finish', 'is-process': item.status === 'process' }"> 
            <div class="step__icon flex-center">
              <svg-icon v-if="item.status === 'finish'" icon="material-symbols:check" />
              <div v-else class="step__icon-inner">{{ index + 1 }}</div>
            </div>
            <div class="step__main ml-12px">
              <div class="step__title">{{ item.title }}</div>
              <div class="step__description">{{ item.description }}</div>
            </div>
          </div>
        </div>
      </div>
      <ElForm v-show="currentStep === 0" :model="model" label-placement="left" label-width="145px">
        <ElFormItem :label="$t('page.store.platform')" prop="platform">
          <ElRadioGroup v-model="model.ShopId">
            <ElRadio
              v-for="item in platformOptions"
              :key="item.value"
              :value="item.value"
              :label="$t(item.label)"
            />
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem :label="$t('page.store.authLink')" prop="authLink">
          <ElInput v-model="model.authLink">
            <template #append>
              <el-button type="primary">复制链接</el-button>
            </template>
          </ElInput>
        </ElFormItem>
        <span class="w-full flex-x-center text-success mb-12px">等待授权中...</span>
        <ElFormItem :label="$t('page.store.name')" prop="name">
          <ElInput v-model="model.name" :placeholder="$t('page.store.form.name')" />
        </ElFormItem>
        <ElFormItem :label="$t('page.store.tag')" prop="tag">
          <ElSelect v-model="model.tag" clearable :placeholder="$t('page.store.form.tag')">
            <ElOption
              v-for="{ label, value } in tagOptions"
              :key="value"
              :label="label"
              :value="value"
            ></ElOption>
          </ElSelect>
        </ElFormItem>
        <ElFormItem :label="$t('page.store.bindWarehouse')" prop="warehouse">
          <ElSelect v-model="model.warehouseId" clearable :placeholder="$t('page.store.form.warehouse')">
            <ElOption
              v-for="item in warehouseOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></ElOption>
          </ElSelect>
        </ElFormItem>
      </ElForm>

      <ElForm v-show="currentStep === 1" label-placement="left" label-width="145px">
        <div class="section-title mb-16px">退货地址：</div>
          <ElFormItem label="Address">{{ address.address }}</ElFormItem>
          <ElFormItem label="Name">{{ address.name }}</ElFormItem>
          <ElFormItem label="Phone">{{ address.phone }}</ElFormItem>
        <div class="section-title mb-16px">发货物流渠道：</div>
        <ElRow>
          <ElCol v-for="(item, index) of freight" :key="index" :span="12">
            <ElFormItem :label="item.LogisticName">
              <ElSwitch v-model="item.Enabled" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        
      </ElForm>

      <ElForm v-show="currentStep === 2" :model="model" label-placement="left" label-width="145px">
        <ElFormItem :label="$t('page.store.account')" prop="name">
          <ElInput v-model="model.account" :placeholder="$t('page.store.form.account')" />
        </ElFormItem>
        <ElFormItem :label="$t('page.store.pwd')" prop="pwd">
          <ElInput v-model="model.pwd" :placeholder="$t('page.store.form.pwd')" type="password" />
        </ElFormItem>
        <ElFormItem :label="$t('page.store.agreement')" prop="agreement">
          <ElSelect v-model="model.agreement" clearable :placeholder="$t('page.store.form.agreement')">
            <ElOption
              v-for="{ label, value } in agreementOptions"
              :key="value"
              :label="label"
              :value="value"
            ></ElOption>
          </ElSelect>
        </ElFormItem>
        <ElFormItem :label="$t('page.store.ipAddress')" prop="ipAddress">
          <ElInput v-model="model.ipAddress" :placeholder="$t('page.store.form.ipAddress')" />
        </ElFormItem>
        <ElFormItem :label="$t('page.store.proxyPort')" prop="proxyPort">
          <ElInput v-model="model.proxyPort" :placeholder="$t('page.store.form.proxyPort')" />
        </ElFormItem>
        <ElFormItem :label="$t('page.store.proxyAccount')" prop="proxyAccount">
          <ElInput v-model="model.proxyAccount" :placeholder="$t('page.store.form.proxyAccount')" />
        </ElFormItem>
        <ElFormItem :label="$t('page.store.proxyPwd')" prop="proxyPwd">
          <ElInput v-model="model.proxyPwd" :placeholder="$t('page.store.form.proxyPwd')" type="password" />
        </ElFormItem>
        <ElFormItem :label="$t('page.store.cookie')" prop="cookie">
          <ElInput v-model="model.cookie" :placeholder="$t('page.store.form.cookie')" type="textarea" :row="3" />
        </ElFormItem>
      </ElForm>

      <div class="flex-x-center mt-18px">
        <ElButton type="primary" @click="handleNext">下一步</ElButton>
      </div>
    </div>
  </ElDialog>
</template>

<style lang="scss" scoped>
.step{
  &__icon{
    width: 28px;
    height: 28px;
    background-color: #F2F3F5;
    border-radius: 50%;
    &-inner{
      font-size: 16px;
    }
  }
  &__title{
    font-size: 16px;
    color: #4E5969;
    line-height: 28px;
  }
  &__description{
    font-size: 12px;
    color: #86909C;
  }
}
.is-process{
  .step{
    &__icon{ 
      background-color: var(--el-color-primary); 
      color: #fff;
    }
    &__title{
      color: #1D2129;
    }
  }
}
.is-finish{
  .step{
    &__icon{ 
      background-color: #E8F3FF;
      color: var(--el-color-primary); 
    }
    &__title{
      color: #1D2129;
    }
  }
}

.section-title{
  color: #4E5969;
}
</style>